<style>
	body{background-color: #BFBFBF!important;}
	.page-tab-content{height: 806px!important;margin-top:30px!important;background-color: #BFBFBF!important;}
	.layui-tab-content{height: 806px!important;}
	.dm-body ul li{width: 93%;height: 148px;margin-left: 10px;margin-top: 10px;border: 2px solid #B1D1D9;border-radius: 5px;position: relative;pointer-events: none;padding-left: 5px;background-color: #FFFFFF}
	.dm-main{width:auto;height:auto;background: #FFFFFF}
	.dm-body{width: 22%;height:880px;float:left;margin-left:35px;margin-top:10px; overflow: hidden;border: 2px solid #b7b48b;border-radius:50px;background-color:#FFFFFF}
	.dm-address{padding-left:20px;font-size: 14px;height:40px;line-height: 40px;border-left:2px solid #ccc;}
	.dm-top{padding-left:20px;height: 70px;line-height: 70px;background: #F0ECEC;position:relative}
	.lay-pic{max-height:200px!important;width: 132px;height: 142px;padding-left: 0px;padding-top:5px;}
	.dm-height{height: 32px;padding-left: 16px;padding-top:15px;font-size:15px;}
	.dm-heards-right{color:red;font-size:20px;margin-left:70px;}
	.dm-channeng{position:absolute;left: 18px;font-size: 10px;top: -9px;color: #B94545;font-weight:bold;z-index: 99;}
	.dm-baifenbi{position:absolute;font-size:10px;top: 13px;left:28px;color:#772222!important;font-weight:bold;z-index: 99}
	.dm-circle {z-index: 90;position: absolute;display:block;width: 60px; height: 60px;border-radius: 70%;background: none;border: 5px solid #B94545;margin-left:1px;}
	.shuiyin-item{position:absolute;pointer-events: none;display: inline-block;left:0;top:0;width: 338px;height:100px;opacity: 0.3;overflow: hidden;padding-right: 10px;
		border-style: none;border-color: unset;color: rgb(105, 16, 20);border-radius: 4px;font-size: 40px;text-align: right;font-weight: bold;font-style: italic;padding-top:35px;padding-left: 40px;
	}
	.shuiyin-tiem-detail{}
	.dm-heard-top{width:92%;font-size: 16px;}
	.dm-heard-top ul li{float:left;width:315px;font-size: 17px;text-align: center;}
	.dm-baifenbi-main{float:left;width:60px;position: relative}
	.dm-biaoti{height: 40px;padding-top:20px;text-align: center;font-size: 18px;}
</style>
<!--显示主体--->
<div  class="dm-main">
</div>

<script type="text/html" id="economiesSummaryTemplate">

	<div style="clear:both;"></div>
	<!-- 内容-->
	{{#  layui.each(d.data, function(index, item){ }}

         {{# if(item.list.length >=1 ){ }}
	<div class="dm-body dm-one-column ">

		<div class="dm-biaoti">{{ item.label_name }}【{{ item.quantity }}件/{{ item.count}}单】</div>


		<ul class="autoScroll_{{index}}">
			{{#  layui.each(item.list, function(index2, item2){ }}
			<li>
				<div style="float:left;"><img src="{{item2.ori_pic}}" class="lay-pic"></div>
				<div style="float:left;">
					<div class="dm-height"><span>{{item2.client_ordernum}}</span> <span style="color: #FF8E00;">
                       {{# if(item.order_type_up !=item2.type_show){ }}
                          {{ item2.type }}
                       {{# } }}

                    </span>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#BC751B">{{ item2.fei_show }}</span></div>
					<div class="dm-height"></div>
					<div class="dm-height">{{item2.quantity}}件/ {{item2.shipment_time}}  <span class="red"></span>

						<!--是否启动背景颜色-->
						{{# if(item.order_type_up==item2.type_show ||  item.break_code_up==item2.break_code_show){ }}
						<span class="shuiyin-item shuiyin-tiem-detail">
                          {{# }else{ }}
                          <span class="shuiyin-item">
                         {{# } }}
							  <!--显示单类，用不同颜色表示-->
                            {{# if(item.order_type_up==item2.type_show){ }}
                                  {{# if(item2.type_show=='new'){ }}
                                  <span style="color:#109007!important;">{{ item2.type }}</span>
                                  {{# }else if(item2.type_show=='emergent'){ }}
                                  <span style="color:#791e1e!important;">{{ item2.type }}</span>
                                 {{# }else if(item2.type_show=='my_return_first'){ }}
                                  <span style="color:#735bbf!important;">{{ item2.type }}</span>
                                 {{# }else if(item2.type_show=='my_first'){ }}
                                  <span style="color:#41b7bd!important;">{{ item2.type }}</span>
                                  {{# }else{ }}
                                  <span style="color:#005bc5!important;">{{ item2.type }}</span>
                                  {{# } }}

                                  {{# if(item.break_code_up==item2.break_code_show){ }}
                                   -
                                  {{# } }}

                            {{# } }}
							  <!--显示断码，其中断码和将断码用不同颜色区分-->
                            {{# if(item.break_code_up==item2.break_code_show){ }}
                                {{# if(item2.break_code_show==3){ }}
                                <span style="color:red!important;"> {{ item2.break_code_status }}</span>
                                 {{#  }else if(item2.break_code_show==2){ }}
                                <span style="color:#e04887!important;"> {{ item2.break_code_status }}</span>
                                  {{# }else{ }}
                                          {{ item2.break_code_status }}
                                 {{# } }}

                            {{# } }}
                        </span>
					</div>
				</div>
			</li>
			{{#  }); }}
		</ul>
	</div>
          {{# } }}
	{{#  }); }}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>

<script>
	layui.use(['form','laytpl'], function () {
		var   form = layui.form, laytpl = layui.laytpl, layer = layui.layer;
		var opTable=function (options=[]){
			var myMsg =layer.load(1, {shade: [0.1,'#fff']});
			var address_id=getQueryString('address_id');
			var page_name=window.location.pathname;
			if(address_id ==null){
				address_id='';
			}
			var parm;
			if(options !=''){
				parm= options.where;
			}
			$.ajax({
				type: "POST",
				url: "{:url('/mp/board/index')}?address_id="+address_id,
				data: parm,
				dataType:"json",
				success: function(res){
					layer.close(myMsg);
					//看板详情 -不显示展示地址
					if(page_name=='/admin.php/mp/localBoard/boardShow.html'){
						var  address_name_ok='';
					}else{
						var address_name_ok= res.address_name;
					}
                    //address_id 为空的时候，从url取
					if(res.address_id==null){
						var address_id_ok=address_id;
					}else{
						var address_id_ok= res.address_id;
					}
					//显示html
					var content = laytpl($('#economiesSummaryTemplate').html()).render({data:res.data,TotalCapacity:res.TotalCapacity,address_name:address_name_ok,address_id:res.address_id});
					$('.dm-main').html(content);
                    //设置滚动速度
                    for(var i=0;i<res.data.length;i++){
                        //大于5条记录 才轮播
                        if (res.data[i].list.length > 5 && typeof (res.data[i]) != 'undefined' && res.data[i] != null) {
                            $(".autoScroll_"+i).scrollQ({'speed_setting': (res.data[i].speed_seting) * 1000});
                        }
                    }
				}
			});

		}
		opTable();

		/**
		 * layui非静态table搜索渲染
		 * @attr data-table table容器ID
		 * @attr hisi-data table基础参数
		 * @attr action 搜索请求地址
		 */
		$(document).on('submit', '#hisi-table-search,#hisi-table-search-optable', function() {
			var that = $(this),
					arr = that.serializeArray(),
					where = new Array(),
					dataTable = that.attr('data-table') ? that.attr('data-table') : 'dataTable',
					options = new Function('return '+ that.attr('hisi-data'))() || {page: {curr:1}};

			for(var i in arr) {
				where[arr[i].name] = arr[i].value;
			}

			options.url = that.attr('action');
			options.where = where;
			opTable(options);

			return false;
		});

	});
	function getQueryString(name) {
		var url2= document.location.href;
		const url_string = url2; // window.location.href
		const url = new URL(url_string);

		return url.searchParams.get(name);
	}
	function autoScroll(obj){
		$(obj).find("ul").animate({marginTop : "-239px"},"fast",'linear',function(){
			$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
		})
	}

</script>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scrollQ.js"></script>
<script >
    /**
     * jQuery scrollQ plugin li上下滚动插件
     * @name jquery-scrollQ.js
     * line 显示li行数
     * scrollNum 每次滚动li行数
     * scrollTime 滚动速度 单位毫秒
     *
     */
    (function($){
        var status = false;
        $.fn.scrollQ = function(options){
            var defaults = {
                line:5,
                scrollNum:5,
                scrollTime:options.speed_setting
            }
            var options=jQuery.extend(defaults,options);
            var _self = this;
            return this.each(function(){
                $("li",this).each(function(){
                    $(this).css("display","none");
                })
                $("li:lt("+options.line+")",this).each(function(){
                    $(this).css("display","block");
                })
                function scroll() {
                    for(i=0;i<options.scrollNum;i++) {
                        var start=$("li:first",_self);
                         // start.fadeOut(1000);
                        // start.slideUp(5000);
                        // $(this).dequeue(2000);
                        $(this).animate();
                        start.css("display","none");
                        start.appendTo(_self);
                        $("li:eq("+(options.line-1)+")",_self).each(function(){
                            // $(this).slideUp(5000);
                           // $(this).slideDown(1000);
                            //$(this).dequeue(2000);
                           // $(this).toggle(1000);
                           // $(this).animate(1000);
                            $(this).css("display","block");
                        })
                    }
                }
                var timer;
                timer = setInterval(scroll,options.scrollTime);
                _self.bind("mouseover",function(){
                    clearInterval(timer);
                });
                _self.bind("mouseout",function(){
                    timer = setInterval(scroll,options.scrollTime);
                });

            });
        }
    })(jQuery);
</script>